<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
</head>
<body>
<ul class="layui-nav" th:fragment="nav" id="navbar">
    <div th:if="${session.userType!='admin'}">
    <li class="layui-nav-item" id="userHomepage"><a th:href="@{/homepage}" >首页</a></li>
    <li class="layui-nav-item" id="userVideo"><a th:href="@{/homepage}" >视频</a></li>
    <li class="layui-nav-item" id="userMovie"><a th:href="@{/homepage}" >影视</a></li>
    <li class="layui-nav-item" id="mediaCategory">
        <a th:href="@{/}" >分区</a>
        <dl class="layui-nav-child">
            <dd><a href="" >科幻</a></dd>
            <dd><a href="" >政治</a></dd>
            <dd><a href="" >舞蹈</a></dd>
            <dd><a href="" >动作</a></dd>
        </dl>
    </li>
<!--    <li class="layui-nav-item" id="userMovie">-->
<!--        <a href="javascript:;" >影视</a>-->
<!--        <dl class="layui-nav-child">-->
<!--            <dd><a href="" >科幻</a></dd>-->
<!--            <dd><a href="" >动作</a></dd>-->
<!--            <dd><a href="" >悬疑</a></dd>-->
<!--            <dd><a href="" >纪录片</a></dd>-->
<!--        </dl>-->
<!--    </li>-->
    </div>
    <div th:if="${session.userType=='admin'}">
        <li class="layui-nav-item " id="adminIndex"><a th:href="|${#request.contextPath}/admin/adminIndex|" >用户管理</a></li>
        <li class="layui-nav-item " id="adminManageVideo"><a th:href="|${#request.contextPath}/admin/adminManageVideo|">视频处理</a></li>
        <li class="layui-nav-item " id="adminProcessing"><a th:href="|${#request.contextPath}/admin/adminProcessing|">举报处理</a></li>
        <li class="layui-nav-item " id="adminClassify"><a th:href="|${#request.contextPath}/admin/adminClassify|">分类管理</a></li>
        <li class="layui-nav-item " id="adminManageComment"><a th:href="|${#request.contextPath}/admin/adminManageComment|">评论管理</a></li>
        <li class="layui-nav-item " id="adminReview"><a th:href="|${#request.contextPath}/admin/adminReview|">审核</a></li>
    </div>
    <script>
        (function () {
            // var nav = document.getElementById('nav');
            // var navs = nav.getElementsByTagName('li');
            var url = location.origin+location.pathname/*.replaceAll(contextPath,"")*/;
            console.log("location",location,url);
            let all = document.getElementById("navbar").querySelectorAll("a");
            console.log("all-a",all)
            for(const ele of all){
                if(url === ele.href){
                    console.dir(ele)
                    if(ele.parentElement.tagName === "LI"){
                        $(ele.parentElement).addClass("layui-this")
                    }else if(ele.parentElement.tagName === "DD"){
                        $(ele.parentElement/*.parentElement.parentElement*/).addClass("layui-this")
                    }
                }

            }
        })();
    </script>
    <!--<li class="layui-nav-item">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#downloadVideoModal">
            下载视频q
        </button>
    </li>-->
    <div style="position: absolute; right:0;top: 0" th:if="${session.admin eq null and session.user eq null}">
        <!--${||#request.servletPath == '/user/login'||#request.servletPath == '/user/register'}-->
        <li class="layui-nav-item ">
            <a data-target="#loginModal" data-toggle="modal" th:href="@{/user/login}" id="loginBtnNav" onclick="changeCode();"
               role="button">登录</a>
        </li>
        <li class="layui-nav-item ">
            <a data-target="#registerModal" data-toggle="modal" th:href="@{/user/register}" id="registerBtnNav" onclick="changeCode();"
               role="button">注册</a>
        </li>
    </div>
    <div style="position: absolute; right:0;top: 0" th:if="${session.admin ne null or session.user ne null}">
        <!--${||#request.servletPath != '/user/login'||#request.servletPath != '/user/register'}-->
        <li class="layui-nav-item">
            <a th:href="@{/user/notice}">消息通知<span class="layui-badge" id="notice_num"></span></a>
            <dl class="layui-nav-child" id="notice">
            </dl>
            <script>
                $.post(contextPath+"/user/notice",function (data) {
                    console.log(data)
                    if(data.data.length === 0){
                        $("#notice_num").css("display","none")
                        $("#notice").css("display","none")
                    }else{
                        $("#notice_num").text(data.data.filter((ele)=>{return ele['infoStatus'] === 0}).length)
                        for(const listItem of data.data){
                            let notice = "<dd>"
                            if(listItem['infoStatus'] === 0){
                                notice += "<span class=\"layui-badge-dot\"></span>"
                            }
                            notice += `<a href="#">${listItem['infoTitle']}</a></dd>`
                            $("#notice").append(notice)
                        }
                    }


                },"json")
            </script>
        </li>
        <li class="layui-nav-item">
            <a href="#">私信<span class="layui-badge-dot"></span></a>
        </li>
<!--        <li class="layui-nav-item">

        </li>-->
        <li class="layui-nav-item" id="userList">
            <img style="border-radius: 25px;width: 50px;height: 50px;" th:src="@{${session.userType == 'user'?session.user.getUserAvatar():'/image/avatar/default.jpg'}}"/>
            <span th:utext="${session.userType == 'user'?session.user.getNickName():(session.userType == 'admin'?session.admin.getNickName():'未知')}"></span>
            <dl class="layui-nav-child">
                <dd><a href="" >个人中心</a></dd>
<!--                    <dd><a href="" >动作</a></dd>-->
<!--                    <dd><a href="" >悬疑</a></dd>-->
                <dd><a th:href="@{/user/logout}">退出登录</a></dd>
            </dl>
        </li>
    </div>
    <!--    <div th:replace="fragment/model::download_video"></div>-->
</ul>
</body>
</html>
-